<script lang="ts" setup>
// @ts-ignore
import {getAgreement} from "~/server/system.service";
// @ts-ignore
import markdownToHtml from "~/utils/markdown";

definePageMeta({
    layout: false,
})
useHead({
    bodyAttrs: {
        class: 'privacy-policy page-template page-template-doc page page-child'
    }
})

const agreementContent = ref('' as any)

function getAgreementInfo() {
    getAgreement().then(({data}: any) => {
        agreementContent.value = markdownToHtml(String(data.data.content))
    })
}

onMounted(() => {
    getAgreementInfo()
})
</script>
<template>
    <NuxtLayout name="common">
        <template v-slot:nav>
            <Nav :title="'隐私政策'"/>
        </template>
        <template v-slot:header>
            <header id="masthead" class="site-header header-bg" role="banner">
                <h2 class="site-branding">隐私政策</h2>
            </header>
        </template>
        <template v-slot:main>
            <article class="page status-publish hentry">
                <div class="entry-content" v-html="agreementContent"/>
            </article>
        </template>
    </NuxtLayout>
</template>
<style scoped>
.header-bg {
    background: black url(@/assets/policy/4.jpg) no-repeat scroll center / cover;
}

@media (min-width: 1152px) {
    .page-template-doc .site-header {
        position: fixed;
        right: 0;
        width: 45%;
        top: 0;
        margin: 0;
        border-radius: 0;
        height: 100%;
        animation: board-siteBG 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1;
        box-shadow: inset rgb(0 0 0 / 50%) 0.5rem 0 1rem 0;
    }

    .page-template-doc .content-area {
        width: 55%;
        position: relative;
        margin-left: 0;
        animation: board-entryBG 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1;
    }

    @keyframes board-entryBG {
        0% {
            left: -60%;
        }
        100% {
            left: 0;
        }
    }
    @keyframes board-siteBG {
        0% {
            width: 100%;
        }
        100% {
            width: 45%;
        }
    }
}
</style>
